<template>
  <div>
    <!-- 年级选择 -->
    <el-form :model="form" label-width="80px">
      <el-form-item label="*年级：" prop="grade">
        <el-select v-model="form.grade" placeholder="请选择年级">
          <el-option label="一年级" value="一年级" />
          <el-option label="二年级" value="二年级" />
          <el-option label="三年级" value="三年级" />
          <!-- 根据实际需求添加更多选项 -->
        </el-select>
      </el-form-item>

      <!-- 标题输入 -->
      <el-form-item label="*标题：" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
      </el-form-item>

      <!-- 试卷列表 -->
      <el-form-item label="*试卷：" prop="papers">
        <el-table :data="form.papers" style="width: 100%" border>
          <el-table-column prop="subject" label="学科" />
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="success" @click="addPaper">添加试卷</el-button>
      </el-form-item>

      <!-- 按钮区域 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// 表单数据
const form = reactive({
  grade: '',
  title: '',
  papers: [
    // 示例数据
    // {
    //   subject: '数学',
    //   name: '试卷1',
    //   createTime: '2023-10-01'
    // }
  ]
})

// 提交表单
const submitForm = () => {
  console.log('submit!', form)
  // 实现提交逻辑
}

// 重置表单
const resetForm = () => {
  form.grade = ''
  form.title = ''
  form.papers = []
}

// 添加试卷
const addPaper = () => {
  form.papers.push({
    subject: '',
    name: '',
    createTime: ''
  })
}

// 编辑试卷
const handleEdit = (index: number, row: any) => {
  console.log('edit', index, row)
  // 实现编辑逻辑
}

// 删除试卷
const handleDelete = (index: number, row: any) => {
  console.log('delete', index, row)
  form.papers.splice(index, 1)
}
</script>

<style scoped>
/* 样式可以根据需要进行调整 */
</style>